<script setup lang="ts">
import { ref } from 'vue';
import { DataGridColumn, DataGridColumnCommand } from '../../components/data-grid/src/data-grid.props';
import { VisualData } from '../../components/data-grid/src/composition/types';
import { data } from './demo-data';

const columns: DataGridColumn[] = [
    { field: 'id', title: '标识', dataType: 'string', sortable: true },
    { field: 'avatar', title: '头像', dataType: 'string', sortable: true },
    { field: 'code', title: '编号', dataType: 'string', sortable: true },
    { field: 'name', title: '名称', dataType: 'string', sortable: true, filterable: true },
    { field: 'fullName', title: '全名', dataType: 'string', sortable: true, filterable: true },
    { field: 'status', title: '状况', dataType: 'string', sortable: true, filterable: true },
    { field: 'description', title: '说明', dataType: 'text', filterable: true },
    { field: 'booleanField1', title: '布尔', dataType: 'boolean', filterable: true },
    { field: 'dateField1', title: '日期', dataType: 'date', filterable: true },
    { field: 'datetimeField1', title: '日期时间', dataType: 'datetime', filterable: true },
    { field: 'enumField1', title: '枚举', dataType: 'enum', filterable: true },
    { field: 'numericField1', title: '数字', dataType: 'number', filterable: true }
];

const gridComponentInstance = ref<any>();
const commands: DataGridColumnCommand[] = [
    {
        text: 'edit',
        type: 'link',
        command: 'edit',
        onClick(e: MouseEvent, index: number, visualDataRow: VisualData) {
            gridComponentInstance.value.editDataItem(visualDataRow);
        }
    },
    {
        text: 'remove',
        type: 'link',
        command: 'remove',
        onClick(e: MouseEvent, index: number, visualDataRow: VisualData) {
            gridComponentInstance.value.removeDataItem(index);
        }
    },
    {
        text: 'accept',
        type: 'link',
        command: 'accept',
        onClick(e: MouseEvent, index: number, visualDataRow: VisualData) {
            gridComponentInstance.value.acceptDataItem(visualDataRow);
        }
    },
    {
        text: 'cancel',
        type: 'link',
        command: 'cancel',
        onClick(e: MouseEvent, index: number, visualDataRow: VisualData) {
            gridComponentInstance.value.cancelDataItem(visualDataRow);
        }
    }
];
let identityNumber = data.length;

function createNewDataItem() {
    identityNumber++;
    return {
        id: '' + identityNumber,
        avatar: '',
        code: '',
        name: '',
        fullName: '',
        status: '',
        description: '',
        booleanField1: false,
        booleanField2: false,
        dateField1: '0001/01/01',
        dateField2: '0001/01/01',
        datetimeField1: '0001/01/01 00:00:00',
        datetimeField2: '0001/01/01 00:00:00',
        enumField1: 'enable',
        enumField2: '01',
        numericField1: 0,
        numericField2: 0,
        customField1: '',
        customField2: '',
        customField3: ''
    } as any;
}
function add() {
    gridComponentInstance.value.addNewDataItem();
}
const editOption = {
    editMode: 'row'
};
const groupOption = {
    enable: true,
    groupFields: ['name', 'dateField1'],
    showSummary: true
};
const summaryOption = {
    enable: false,
    groupFields: ['numericField1']
};
</script>

<template>
    <button @click="add()">add</button>
    <div class="fv-grid-demo">
        <f-data-grid
            ref="gridComponentInstance"
            :columns="columns"
            :data="data"
            :editable="true"
            :edit-option="editOption"
            :enable-commands="true"
            :commands="commands"
            :new-data-item="createNewDataItem"
            :group="groupOption"
            :summary="summaryOption"
        ></f-data-grid>
    </div>
</template>
<style></style>
